<template>
  <div class="main" v-color="'bgkImg'">
    <dz-nav :is-back="true" back-url="/my">
      <template #center>
        <b v-color><qq>TeamSize</qq></b>
      </template>
    </dz-nav>
    <div class="top">
      <div class="card-box">
        <dz-team v-for="(item,index) in teamArray" :item="item" :index="index" :key="index"></dz-team>
      </div>
    </div>
    <div class="box"></div>
    <div class="bottom">
      <div class="bottom-nav">
        <div class="item" @click="changeItem(item)" :class="{active:choseForm.id === item.id}" v-for="(item,index) in levelList" :key="index">{{ item.name }}</div>
      </div>
      <div class="bottom-item">
        <div class="btn-img" v-if="tableData.length<1">
          <img  src="@/assets/images/img_search_result.png" alt="">
        </div>
        <van-list
            v-else
            style="width: 100%;"
            v-model:loading="loading"
            :finished="finished"
            finished-text="Finished"
            loading-text="loading"
            error-text="error"
            @load="onLoad"
        >
         <dz-team-card v-for="(item,index) in tableData" :key="index" :item="item"></dz-team-card>
        </van-list>
      </div>
      <dz-safe> </dz-safe>
    </div>
  </div>
</template>

<script>
import {getDicLevel, newGetTeam, selectTaskOrder, teamReport} from "@/api/apiFox";
  import {combinedData} from "@/utils/checked";

  export default {
    data(){
      return{
        form:{},
        choseForm:{},
        levelList:[],
        teamArray:[],
        tableData:[],
        finished: false,
        loading: false,
        queryParams:{
          pageSize:10,
          pageNo:1,
          accountFragment: "",
          levels: 1
        },
      }
    },
    methods:{
      getLists(){
        teamReport().then(res=>{
          console.log(res)
          let s = []
          for(let key in res.list){
            s.push({name:key,amount:res?.list[key]})
          }
          s.sort((a, b) => {
            const numA = parseInt(a.name.match(/\d+/)[0]);
            const numB = parseInt(b.name.match(/\d+/)[0]);
            return numA - numB;
          });
          // 相邻的两个进行合并成为一个新的数组
          let array = combinedData(s)
          console.log(array)
          this.teamArray = array
          this.levelList = res.level
          if (res.level && res.level.length>0){
            this.choseForm = res.level[0]
            this.queryParams.levels = res.level[0].num
            this.getList()
          }
        }).catch(err=>{})

      },
      changeItem(item){
        this.choseForm = item
        this.queryParams.levels = item.num
        this.queryParams.pageNo=1
        this.tableData=[]
        this.finished =false
        this.getList()
      },

      getList(){
        let self = this;
        newGetTeam(this.queryParams).then(res=>{
          self.tableData = [...self.tableData,...res];
          self.loading = false;
          if (res.length<1){
            self.finished = true
          }
        }).catch(err=>{
          console.log(err)
        })
      },
      onLoad() {
        let self = this;
        self.loading=true;
        self.queryParams.pageNo++;
        setTimeout(()=>{
          self.getList(this.queryParams)
        },500)
      },
    },
    mounted() {
      this.getLists()
    }
  }
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  min-height: 100vh;
  .top{
    width: 100%;
    height: 212px;
    padding: 0px 19px;
    box-sizing: border-box;
    .card-box{
      width: 100%;
      height: 200px;
      background: #fff;
      border-radius: 10px;
      overflow-y: scroll;
      padding: 10px 16px;
      box-sizing: border-box;
    }
  }
  .box{
    width: 100%;
    height: 34px;
    position: relative;
    background: linear-gradient( 180deg, rgba(240,238,255,0) 0%, #FFE2A9 100%);
    border-radius: 0px 0px 0px 0px;
    margin-top: -30px;
  }
  .bottom{
    width:100%;
    min-height: 100px;
    background: linear-gradient( 180deg, #FFF0C9 0%, #D49188 100%);
    border-radius: 30px 30px 0px 0px;
    padding: 20px 16px;
    box-sizing: border-box;
    .bottom-nav{
      width: 100%;
      height: 28px;
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      .item{
        display: inline-block;
        flex-grow: 0;
        flex-shrink: 0;
        width: 70px;
        height: 28px;
        background: #F0EEFF;
        color: #533DF1;
        border-radius: 20px 20px 20px 20px;
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
        margin-right: 10px;
      }
      .active{
        background: #533DF1;
        color: #fff;
      }
    }
    .bottom-item{
      margin-top: 20px;
      width: 100%;
      .btn-img{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 200px;
        img{
          width: 150px;
        }
      }
    }
  }
}
</style>